<template>
  <view class="commentSection">
    <uni-popup ref="popup" :mask-click="false" :is-mask-click="true">
        <uni-section title="热门评论" type="line"></uni-section>
        <view class="item" v-for="item in newList">
            <image class="img" :src="item.user?.avatarUrl"></image>
            <view class="text">
               <view class="username">{{ item.user?.nickname }}</view>
               <view class="comment">{{ item.content }}</view>
            </view>
            <view>></view>
        </view>
        <uni-section title="最新评论" type="line"></uni-section>
        <view class="item" v-for="item in newList">
            <image class="img" :src="item.user?.avatarUrl"></image>
            <view class="text">
               <view class="username">{{ item.user?.nickname }}</view>
               <view class="comment">{{ item.content }}</view>
            </view>
            <view>></view>
        </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CommentItem } from '@/services/type'

interface Props {
    newList:CommentItem[]
    hotList:CommentItem[]
}
const props = defineProps<Props>()

const popup = ref()
const open = () => {
    popup.value.open('bottom')
}

// 将方法暴露出去，以便父组件调用
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.commentSection{
    max-height: 500px;
    overflow-y: scroll;
    overflow: hidden;
}
.uni-popup{
    .item {
        display: flex;
        background: #fff;
        border-top: 1px solid #ccc;
        align-items: center;
        padding: 10px;
        .img{
            width: 26px;
            height: 26px;
            margin-right: 10px;
        }
        .text{
            flex: 1;
            .username{
                font-size: 14px;
                color: #3b4144;
            }
            .comment{
                font-size: 12px;
                color: #999;
                word-wrap: wrap;
                margin-top: 5px;
            }
        }
    }
}
.commentSection::v-deep.uni-popup__wrapper{
    max-height: 500px;
    overflow-y: scroll;
}

</style>